import * as THREE from 'three'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { destroy } from '@/utils'

let scene, renderer, camera, controls, animationID

export default function init(canvas) {
  scene = new THREE.Scene()
  scene.background = new THREE.Color('#eee')
  // scene.fog = new THREE.Fog('#eee', 20, 100)
  renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
  renderer.shadowMap.enabled = true
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.z = 10
  light()
  // 轨道控制器
  controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true
  loadModel()
}

const light = () => {
  const hemLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6)
  hemLight.position.set(0, 48, 0)
  scene.add(hemLight)

  const dirLight = new THREE.DirectionalLight(0xffffff, 0.6)
  //光源等位置
  dirLight.position.set(-10, 8, -5)
  //可以产生阴影
  dirLight.castShadow = true
  dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024)
  scene.add(dirLight)

  let floorGeometry = new THREE.PlaneGeometry(8000, 8000)
  let floorMaterial = new THREE.MeshPhongMaterial({
    color: 0x857ebb,
    shininess: 0
  })

  let floor = new THREE.Mesh(floorGeometry, floorMaterial)
  floor.rotation.x = -0.5 * Math.PI
  floor.receiveShadow = true
  floor.position.y = -0.001
  scene.add(floor)
}

const animate = () => {
  controls.update()
  console.log('person')
  renderer.render(scene, camera)
  animationID = requestAnimationFrame(animate)
  if (resizeRendererToDisplaySize()) {
    const canvas = renderer.domElement
    camera.aspect = canvas.clientWidth / canvas.clientHeight
    camera.updateProjectionMatrix()
  }
}

const loadModel = () => {
  const fbxLoader = new FBXLoader()
  fbxLoader.load('./src/pages/person/model/FBX_2152.fbx', (fbx) => {
    // 遍历模型每部分
    fbx.traverse(o => {
      // 将图片作为纹理加载
      let explosionTexture = new THREE.TextureLoader().load(
        './src/pages/person/model/Business_01.png'
      )
      // 调整纹理图的方向
      explosionTexture.flipY = false
      // 将纹理图生成基础网格材质(MeshBasicMaterial)
      const material = new THREE.MeshBasicMaterial({
        map: explosionTexture,
      })
      // 给模型每部分上材质
      o.material = material
      if (o.isMesh) {
        o.castShadow = true
        o.receiveShadow = true
      }
    })
    scene.add(fbx)
  })
  animate()
}

const resizeRendererToDisplaySize = () => {
  const canvas = renderer.domElement
  let width = window.innerWidth
  let height = window.innerHeight
  let canvasPixelWidth = canvas.width / window.devicePixelRatio
  let canvasPixelHeight = canvas.height / window.devicePixelRatio

  const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height
  if (needResize) {
    renderer.setSize(width, height, false)
  }
  return needResize
}

/**
 * 清除上下文
 */
export const destroyContext = () => {
  destroy(scene, renderer, animationID)
}
